<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <view class="header-content">
        <page-header title="留言咨询" subtitle="" start-color="#39c5bb" end-color="#398dee" height="40rpx" />
      </view>
    </view>

    <!-- 表单卡片 -->
    <view class="form-card">
      <view class="form-title">请填留言信息</view>

      <!-- 表单内容 -->
      <wd-form ref="formRef" :model="formData" error-type="message">
        <view class="form-content">
          <!-- 姓名输入 -->
          <wd-input
            label="姓名"
            prop="name"
            v-model="formData.name"
            placeholder="请输入您的姓名"
            :rules="[{ required: true, message: '请输入姓名' }]"
          />

          <!-- 电话输入 -->

          <wd-input
            label="电话"
            prop="phoneNumber"
            :rules="[
              { required: true, message: '请输入电话号码' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
            ]"
            v-model="formData.phoneNumber"
            placeholder="请输入您的联系电话"
            type="number"
            :maxlength="11"
          />

          <!-- 留言内容 -->
          <wd-textarea
            label="咨询内容"
            prop="content"
            v-model="formData.content"
            placeholder="请输入您的咨询内容"
            :maxlength="200"
            :rules="[
              { required: true, message: '请输入咨询内容' },
              { validator: validateContent, message: '咨询内容至少5个字符' }
            ]"
            show-word-count
          />
        </view>

        <!-- 提交按钮 -->
        <view class="submit-btn-wrapper">
          <wd-button type="primary" block round @click="submitForm" :loading="loading">提交留言</wd-button>
        </view>
      </wd-form>
    </view>

    <!-- Toast 组件 -->
    <wd-toast id="wd-toast" />
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'
// 导入wot-design-uni组件
// import WdForm from '@/uni_modules/wot-design-uni/components/wd-form/wd-form.vue'
// import WdFormItem from '@/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue'
// import WdInput from '@/uni_modules/wot-design-uni/components/wd-input/wd-input.vue'
// import WdTextarea from '@/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue'
// import WdButton from '@/uni_modules/wot-design-uni/components/wd-button/wd-button.vue'
// import WdToast from '@/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue'
import { useToast } from '@/uni_modules/wot-design-uni'
import { submitFeedback } from '@/api/feedback'

// 获取toast实例
const toast = useToast()

// 表单数据
const formData = reactive({
  name: '',
  phoneNumber: '',
  content: ''
})

// 加载状态
const loading = ref(false)

// 自定义验证函数 - 验证留言内容长度
const validateContent = (value) => {
  return value.length >= 5
}

// 表单引用
const formRef = ref(null)

// 提交表单
const submitForm = () => {
  // 使用wot-design-uni的表单验证
  formRef.value
    .validate()
    .then((valid) => {
      if (valid.valid) {
        // 设置加载状态
        loading.value = true

        // 准备提交数据
        const submitData = {
          name: formData.name,
          phoneNumber: formData.phoneNumber, // 注意：服务端接收的字段名是phoneNumber
          content: formData.content
        }
		// console.log(submitData)

        // 调用API提交数据
        submitFeedback(submitData)
          .then((res) => {
            // 提交成功提示
            if(res.code === 200){
				toast.show({
				  msg: '留言提交成功',
				  iconName: 'success',
				  closed:resetForm
				})
			}else{
				toast.show({
				  msg: err.message || '提交失败，请稍后重试',
				  iconName: 'error'
				})
			}
            // 延迟返回上一页
            // setTimeout(() => {
            //   uni.navigateBack()
            // }, 1500)
          })
          .catch((err) => {
            // 提交失败提示
            toast.show({
              msg: err.message || '提交失败，请稍后重试',
              iconName: 'error'
            })
          })
          .finally(() => {
            // 无论成功失败，都关闭加载状态
            loading.value = false
          })
      }else{
		  toast.show({
		    msg: '表单验证失败',
		    iconName: 'error'
		  })
	  }
    })
    .catch((error) => {
      console.log('表单验证失败', error)
    })
}

const resetForm = () => {
	// 重置表单
	formData.name = ''
	formData.phoneNumber = ''
	formData.content = ''
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

.container {
  padding: 20rpx;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.header-content {
  flex: 1;
}

.form-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  position: relative;
  padding-left: 20rpx;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 30rpx;
    background: linear-gradient(to bottom, #39c5bb, #398dee);
    border-radius: 3rpx;
  }
}

.form-content {
  margin-bottom: 40rpx;
}

.submit-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}
</style>
